<template>
	<div class="container">
		<Row :style="{ padding: '8px' }">
			<i-Col span="12">
				<Input
					v-model="subjectName"
					search
					placeholder="输入学科名称进行搜索"
					size="large"
					:style="{ width: '280px', marginRight: '8px' }"
					@on-search="serarchEvent"
				/>
				<Button type="primary" size="large" @click="serarchEvent">搜索</Button>
			</i-Col>
			<i-Col span="12">
				<Button class="fr" size="large" @click="changeModalDisplay('新增学科')">
					新建学科
				</Button>
			</i-Col>
		</Row>
		<!-- 数据列表 -->
		<Table
			stripe
			border
			highlight-row
			:loading="loading"
			:columns="tableColumns"
			:data="tableData"
		>
			<template slot="addDate" slot-scope="{ row }">
				{{ new Date(row.addDate).toLocaleString() }}
			</template>
			<template slot="isFrontDisplay" slot-scope="{ row }">
				{{ row.isFrontDisplay ? '是' : '否' }}
			</template>
			<template slot="actions" slot-scope="{ row }">
				<ButtonGroup>
					<Button ghost type="info" size="small" @click="tableTagsEvent(row)">
						标签
					</Button>
					<Button ghost type="primary" size="small" @click="tableEditEvent(row)">
						编辑
					</Button>
					<Button ghost type="error" size="small" @click="tableDeleterEvnet(row)">
						删除
					</Button>
				</ButtonGroup>
			</template>
			<template slot="footer">
				<Page
					:total="pageInfo.count"
					:page-size-opts="pageInfo.pageSizeArr"
					:current="pageInfo.page"
					:page-size="pageInfo.defaultPageSize"
					:style="{ float: 'right' }"
					@on-change="pageChange"
					@on-page-size-change="pageSizeChange"
					show-sizer
					show-total
					show-elevator
				/>
			</template>
		</Table>
		<!-- 新增/编辑学科对话框 -->
		<Modal
			v-model="modalDisplay"
			:title="modalTitle"
			@on-visible-change="modalVisibleEvent"
		>
			<i-Form ref="form" :model="formData" :rules="formRules">
				<FormItem prop="subjectName" label="学科名称">
					<Input
						ref="nameInput"
						type="text"
						v-model="formData.subjectName"
						placeholder="请输入学科名称"
						size="large"
					/>
				</FormItem>
				<FormItem prop="isFrontDisplay" label="是否在前台显示">
					<i-Select v-model="formData.isFrontDisplay" size="large">
						<i-Option
							v-for="item in [
								{ value: 1, label: '显示' },
								{ value: 0, label: '不显示' }
							]"
							:key="item.value"
							:value="item.value"
							:label="item.label"
						/>
					</i-Select>
				</FormItem>
			</i-Form>
			<template slot="footer">
				<Button @click="modalOkEvent()">取消</Button>
				<Button type="primary" @click="modalOkEvent(true)">确认</Button>
			</template>
		</Modal>
		<SubjectTagsModal
			v-model="subjectModal"
			:tags="subjectTags"
			title="学科标签"
		></SubjectTagsModal>
	</div>
</template>
<script>
import SubjectTagsModal from './components/SubjectTagsModal.vue'

export default {
	name: 'subject',
	components: {
		SubjectTagsModal
	},
	data() {
		return {
			tableColumns: [
				{
					type: 'index',
					title: '#',
					width: '56px',
					align: 'center',
					fixed: 'left'
				},
				{
					title: '学科名称',
					key: 'subjectName',
					width: '280px',
					tooltip: true
				},
				{
					title: '创建者',
					key: 'username',
					width: '150px'
				},
				{
					title: '创建日期',
					slot: 'addDate',
					width: '180px'
				},
				{
					title: '前台是否显示',
					slot: 'isFrontDisplay',
					align: 'center',
					width: '110px'
				},
				{
					title: '二级目录',
					key: 'twoLevelDirectory',
					align: 'center',
					width: '90px'
				},
				{
					title: '标签',
					key: 'tags',
					align: 'center',
					width: '90px'
				},
				{
					title: '题目数量',
					key: 'totals',
					align: 'center',
					width: '90px'
				},
				{
					title: '操作',
					align: 'center',
					slot: 'actions',
					width: '162px',
					fixed: 'right'
				}
			],
			loading: true,
			tableData: [],
			subjectName: '',
			modalDisplay: false,
			modalTitle: '新增学科',
			formData: {
				id: -1,
				subjectName: '',
				isFrontDisplay: 1
			},
			formRules: {
				subjectName: [
					{ required: true, message: '学科名不能为空', trigger: 'change' },
					{ min: 3, message: '学科名的长度不能小于3', trigger: 'change' }
				]
			},
			subjectTags: [],
			subjectModal: false
		}
	},
	methods: {
		getTableData() {
			this.loading = true

			this.$http
				.subjectsList(this.getQueryParams({ subjectName: this.subjectName }))
				.then(res => {
					console.log(res)
					this.pageInfo.count = res.counts
					this.tableData = res.items
					this.loading = false
				})
				.catch(err => {
					this.$Message.error('学科列表数据获取错误')
				})
		},
		pageChange(page) {
			this.pageInfo.page = page
			this.getTableData()
		},
		pageSizeChange(size) {
			this.pageInfo.defaultPageSize = size
			this.getTableData()
		},
		async tableTagsEvent({ id }) {
			this.subjectTags = await this.$http.tagsSimple({ subjectID: id })
			this.subjectModal = true
		},
		tableEditEvent({ id, subjectName, isFrontDisplay }) {
			this.formData.id = id
			this.formData.subjectName = subjectName
			this.formData.isFrontDisplay = isFrontDisplay
			this.changeModalDisplay('编辑学科')
		},
		tableDeleterEvnet({ id }) {
			const that = this
			this.$Modal.confirm({
				title: '提示',
				content: '<h3>确定要删除该学科吗?</h3>',
				okText: '删除',
				cancelText: '算了',
				async onOk() {
					await that.$http.deleteSubject(id)
					that.$Message.success('删除成功')
					that.getTableData()
				}
			})
		},
		changeModalDisplay(title) {
			this.modalTitle = title
			this.modalDisplay = true
		},
		serarchEvent() {
			this.getTableData()
		},
		async modalOkEvent(ok) {
			if (!ok) {
				this.modalDisplay = false
				return
			}

			try {
				const valid = await this.$refs['form'].validate()

				if (!valid) return

				if (this.modalTitle == '新增学科') {
					await this.$http.newSubject(this.formData)
				} else {
					await this.$http.updateSubject(this.formData)
				}

				this.modalDisplay = false
				this.$Message.success('操作成功')
				this.getTableData()
			} catch (error) {
				this.$Message.error('操作失败')
			}
		},
		modalVisibleEvent(visible) {
			if (visible) {
				this.$nextTick(() => {
					this.$refs['nameInput'].focus()
				})
			} else {
				this.$refs['form'].resetFields()
			}
		}
	},
	created() {
		this.getTableData()
	}
}
</script>
<style lang="less" scoped></style>
